<template>
    <div class="time-com">
        <div class="time-left">
            {{time}}
        </div>
        <div class="time-right">
            <p>{{week}}</p>
            <p>{{date}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: "timeCom",
    data() {
        return {
            date: "",
            time: "",
            week: "",
            weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
        }
    },
    created() {
        this.init();
    },
    methods: {
        init(){
            setInterval(() => {
                this.date = this.$dayjs().format("YYYY-MM-DD");
                this.time = this.$dayjs().format("HH:mm:ss");
                this.week = this.weekArr[this.$dayjs().day()];
            },1000)
        }
    }
}
</script>

<style lang="scss" scoped>
.time-com{
    position: absolute;
    top: 62px;
    left: 81px;
    display: flex;
    align-items: center;
    .time-left{
        color: #fff;
        font-weight: 500;
        font-size: 24px;
        line-height: 28px;
    }
    .time-right{
        margin-left: 10px;
        p{
            color: rgba(255, 255, 255, 0.8);
            font-weight: 400;
            font-size: 12px;
            line-height: 12px;
        }
        p+p{
            margin-top: 4px;
        }
    }
}
</style>